<template>
  <div class="list2 flex-row">
    <img :src="icon" />
    <div class="line-da" v-if="showLine"></div>
    <div class="text-box flex-al al-start">
      <span class="t1" :style="color===0?'color:#fff':'color:#333'">{{ t1 }}</span>
      <span class="t2" :style="color===0?'color:#fff':'color:#666'">{{ t2 }}</span>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    icon: {
      type: String,
      default: "参赛对象.png",
    },
    t1: {
      type: String,
      default: "参赛对象",
    },
    color: {
      type: Number,
      default: 0,
    },
    t2: {
      type: String,
      default:
        "举办“中国设计年度人物评选及颁奖”等系列活动，是开创业界先河一次历史性转折。",
    },
    showLine:{
      type:Boolean,
      default:false
    }
  }
};
</script>
<style lang="less" scoped>
.list2 {
   
    margin-bottom: 30px;
   
    flex-wrap: nowrap;
    position: relative;
    .line-da{
      height: 60px;
      border-left: 1px dashed #fff;
      left: 20px;
      top: 30px;
      position: absolute;

    }
  img {
    width: 40px;
    height: 40px;
    margin-right: 10px;
  }
  .text-box {
    .t1 {
      font-size: 15px;
      color: #ffffff;
      font-weight: bolder;
    }
    .t2 {
      font-size: 13px;
      color: #ffffff;
      margin-top: 2px;
    }
  }
}
</style>
